/**
* component Radio
* prefix .mui-radio
*/
.mui-radio {
  display: inline-flex;
  font-size: 0;
  cursor: pointer;
  user-select: none;

  & > .mui-radio-icon {
    display: inline-block;
    width: 18px;
    height: 36px;
    position: relative;
    vertical-align: middle;
    &:before {
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      border: solid 1px #ccc;
      border-radius: 50%;
      position: absolute;
      left: 0;
      top: 9px;
      box-sizing: initial;
    }
    &:after {
      content: '';
      display: block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: transparent;
      position: absolute;
      left: 4px;
      top: 13px;
    }
  }
  &:hover > .mui-radio-icon {
    &:before {
      border: solid 1px #bbb;
    }
  }

  & > .colortag {
    width: 8px;
    height: 8px;
    border-radius: 8px;
    margin: 14px -6px 0 12px;
  }

  & > .mui-radio-label {
    display: inline-block;
    font-size: 14px;
    line-height: 20px;
    color: #333;
    padding: 8px 12px;
    vertical-align: middle;
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &.mui-radio-disabled {
    cursor: not-allowed;
    & > .mui-radio-icon {
      &:before {
        border-color: #ccc;
        background-color: #f5f5f5;
      }
    }
    &.mui-radio-checked {
      & > .mui-radio-icon:after {
        background-color: #ccc;
      }
    }
    & > .mui-radio-label {
      color: #9e9e9e;
    }
  }
}
